<template>
    <div v-cloak>
    
        <el-row type="flex" style="margin-top:3%" :gutter="20">
    
            <el-col :span="5">
    
                <div class="grid-content bg-purple-light"></div>
    
            </el-col>
    
            <el-col :span="14">
    
                <el-form ref="form" :model="form" :rules="formRules" label-width="120px" label-position="left">
    
    
    
                    <el-form-item label="刊期" prop="year">
    
                        <el-col :span="12" >
    
                            <el-date-picker v-model="form.year" type="year" value-format="yyyy" placeholder="选择年" style="width: 100%;">
    
                            </el-date-picker>
    
    
    
                        </el-col>
    
                        <el-col :span="12">
    
                            <el-form-item prop="period">
    
                                <el-select v-model="form.period" placeholder="请选择期数" style="width: 100%;">
    
                                    <el-option v-for="item in periods" :key="item.codeKey" :label="item.codeValue" :value="item.codeKey">
    
                                    </el-option>
    
                                </el-select>
    
                            </el-form-item>
    
                        </el-col>
    
                    </el-form-item>
    
    
    
                    <el-form-item label="总刊号" prop="number">
    
                        <el-col :span="24">
    
                            <el-input v-model.trim="form.number"></el-input>
    
                        </el-col>
    
                    </el-form-item>
    
                    <el-form-item label="封面图" prop="cover">
    
                        <el-col :span="24">
    
                            <el-upload action="/api/img/upload" 
                                :on-success="successFile" 
                                :before-upload="handleBefore" 
                                :show-file-list="false"
                                style="float:left">
                                <el-button>选择图片</el-button>
    
                                <el-input type="hidden" v-model="form.cover" style="width:0;height:0;"></el-input>
    
                            </el-upload>
    
                            <span class="upload_span">建议宽高比：756px*1056px</span>
    
                        </el-col>
    
                        <br>
    
                        <div v-if="form.cover != null" style="margin-top:10px"><img :src="form.cover" height="200px" /></div>
    
                    </el-form-item>
    
                    <el-form-item label="关联栏目" prop="columnIds">
    
                        <el-col :span="24">
    
                            <el-transfer filterable filter-placeholder="请输入栏目名称" v-model="form.columnIds" target-order="push" :titles="['选择栏目', '已选栏目']" :props="props" :data="allColumns">
    
                            </el-transfer>
    
                        </el-col>
    
                    </el-form-item>
    
                    <el-form-item label="收费设置">
    
                        <el-col :span="22">
    
                            <el-form-item label="商品价格" prop="price">
    
                                <el-input v-model="form.price"></el-input>
    
                            </el-form-item>
    
                        </el-col>
    
                        <el-col :span="2">
    
                            <span>元</span>
    
                        </el-col>
    
    
    
                        <!-- <el-form-item label="划线价格" prop="lineationPrice">
    
                                <el-input v-model="form.lineationPrice" style="width:250px;margin:4px 0px"></el-input>&nbsp;&nbsp;&nbsp;<span>元</span>
    
                            </el-form-item> -->
    
                    </el-form-item>
    
                    <el-form-item label="上线设置">
    
                        <el-radio-group v-model="form.state">
    
                            <el-radio class="radio online_set" label="Publish">立即上线</el-radio> <br/>
    
                            <el-row type="flex">
    
                                <el-col>
    
                                    <el-radio class="radio online_set" label="quartz">定时上线</el-radio>
    
                                </el-col>
    
                                <el-col>
    
                                    <el-form-item prop="publishDt" v-if="form.state === 'quartz'">
    
                                        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="form.publishDt" type="datetime" placeholder="选择日期时间">
    
                                        </el-date-picker>
    
                                    </el-form-item>
    
                                </el-col>
    
                            </el-row>
    
                            <br/>
    
                            <el-radio class="radio online_set" label="Draft">存为草稿</el-radio>
    
                        </el-radio-group>
    
                    </el-form-item>
    
                    <el-form-item>
    
                        <el-button @click="onSubmit" class="form_button">提交</el-button>
    
                        <el-button @click="back" class="form_button">取消</el-button>
    
                    </el-form-item>
    
                </el-form>
    
            </el-col>
    
        </el-row>
    
    </div>
</template>

<script>
    　
    
    import {　
    
        uploadImg　
    
    } from '@/api/common/upload'
    
    import {
    
        getDetail
    
    } from '@/api/sys/detail'
    
    import {
    
        getAllColumns
    
    } from '@/api/magazine/magazinecolumn'
    
    import {
    
        insertMagazine,
    
        updateMagazine,
    
        getMagazineById　
    
    } from '@/api/magazine/magazine'
    
    export default {
    
        data() {
    
            //价格校验
    
            const priceReg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
    
            const numReg = /(^[1-9]([0-9]+)?)$/
    
            const validatePrice = (rule, value, callback) => {
    
                if (value === null || value === undefined || value === '') {
    
                    callback(new Error('上线价格不能为空'))
    
                }  else if (!priceReg.test(value)) {
    
                    callback(new Error('请输入正整数或小数(保留至多两位小数)'));
    
                }else if (parseFloat(value) > 9999.99) {
    
                    callback(new Error('价格不能超过9999.99'))
    
                } else {
    
                    callback()
    
                }
    
            }
    
            const validateLineationPrice = (rule, value, callback) => {
    
                if (value === null || value === undefined || value === '') {
    
                    callback()
    
                } else if (value.length > 5) {
    
                    callback(new Error('长度不能超过5位数'));
    
                } else if (!priceReg.test(value)) {
    
                    callback(new Error('请输入正整数或小数(保留至多两位小数)'))
    
                } else {
    
                    callback()
    
                }
    
            }
    
            const validateNum = (rule, value, callback) => {
    
                if (value === null || value === undefined || value === '') {
    
                    callback(new Error('杂志刊号不能为空'))
    
                } else if (value.length > 10) {
    
                    callback(new Error('长度不能超过10位数'))
    
                } else if (!numReg.test(value)) {
    
                    callback(new Error('刊号为正整数，最小值为１'))
    
                } else {
    
                    callback()
    
                }
    
            }
    
            return {
    
                actionUrl: process.env.BASE_API + '/api/img/upload',
    
                periods: [],
    
                imgData: {
    
                    accept: 'image/gif, image/png, image/jpeg',
    
                },
    
                temPublishDt: null,
    
                allColumns: [],
    
                props: {
    
                    key: 'id',
    
                    label: 'name'
    
                },
    
                form: {
    
                    id: undefined,
    
                    year: undefined,
    
                    period: undefined,
    
                    number: undefined,
    
                    cover: undefined,
    
                    columnIds: [],
    
                    price: undefined,
    
                    lineationPrice: undefined,
    
                    state: 'Publish',
    
                    publishDt: undefined
    
                },
    
                formRules: {
    
                    year: [{
    
                        required: true,
    
                        message: '杂志年限为必选项',
    
                        trigger: 'change'
    
                    }],
    
                    period: [{
    
                        required: true,
    
                        message: '杂志期数为必选项',
    
                        trigger: 'change'
    
                    }],
    
                    number: [{
    
                        required: true,
    
                        validator: validateNum,
    
                        trigger: 'blur'
    
                    }],
    
                    cover: [{
    
                        required: true,
    
                        message: '封面图必须上传',
    
                        trigger: 'change'
    
                    }],
    
                    columnIds: [{
    
                        required: true,
    
                        message: '关联栏目必选',
    
                        trigger: 'blur,change'
    
                    }],
    
                    price: [{
    
                        required: true,
    
                        validator: validatePrice,
    
                        trigger: 'blur'
    
                    }],
    
                    // lineationPrice:[{
    
                    //     required:true, validator: validateLineationPrice, trigger: 'blur'
    
                    // }],
    
                    state: [{
    
                        required: true,
    
                        message: '上线设置为必选项',
    
                        trigger: 'change'
    
                    }],
    
                    publishDt: [{
    
                        required: true,
    
                        message: '定时时间不能为空',
    
                        trigger: 'blur'
    
                    }]
    
                },
    
                dialogImageUrl: "",
    
                dialogVisible: false
    
            }
    
        },
    
        // watch:{
    
        //     'form.cover':function (val, oldVal) {
    
        //         if(val!== undefined){
    
        //             document.getElementById("upload_control").childNodes[1].style.display="none";
    
        //         }else{
    
        //             document.getElementById("upload_control").childNodes[1].style.display="block";
    
        //         }
    
        //     }
    
        // },
    
        created() {
    
            this.getPeriods()
    
            const id = this.$route.query.id
    
            if (id !== undefined) {
                this.getMagazineColumn(1)
                this.getEditMagazine(id)
    
            }else{
                 this.getMagazineColumn(0)
            }
    
        },
    
        methods: {
    
            getEditMagazine(id) {
    
                getMagazineById(id).then(response => {
    
                    if (response.code === 0) {
    
                        this.form = response.data
    
                        this.form.year = this.form.year + ''
    
                        if (this.form.state !== 'quartz') {
    
                            this.temPublishDt = this.form.publishDt
    
                            this.form.publishDt = ''
    
    
    
                        }
    
                    }
    
                })
    
            },
    
            getPeriods() {
    
                const param = {
    
                    masterKey: "PERIODS"
    
                }
    
                getDetail(param).then(response => {
    
                    if (response.code === 0) {
    
                        this.periods = response.data
    
                    }
    
                })
    
            },
    
            onSubmit() {
    
                this.$refs.form.validate((valid) => {
    
                    if (valid) {
    
                        if (this.form.id === undefined || this.form.id === '') {
    
                            insertMagazine(this.form).then(response => {
    
                                if (response.code === 0) {
    
                                    this.$message({
    
                                        type: 'success',
    
                                        message: response.msg
    
                                    })
    
                                    this.back()
    
                                }
    
                            })
    
                        } else {
    
                            if (this.form.state === 'Publish') {
    
                                this.form.publishDt = this.temPublishDt
    
                            }
    
                            updateMagazine(this.form).then(response => {
    
                                if (response.code === 0) {
    
                                    this.$message({
    
                                        type: 'success',
    
                                        message: response.msg
    
                                    })
    
                                    this.back()
    
                                }
    
                            })
    
                        }
    
                    }
    
                });
    
            },
    
            successFile(response, file, fileList) {
                if(response.code === 0){
                    this.form.cover = response.data;
                }else{
                    this.$message({
                        type: 'error',
                        message: response.msg
                    })
                }
            },
    
            handleRemove(file, fileList) {
    
                this.form.cover = undefined
    
                document.getElementById("upload_control").childNodes[1].style.display = "block";
    
            },
    
            handlePictureCardPreview(file) {
    
                this.dialogImageUrl = file.url;
    
                this.dialogVisible = true;
    
            },
    
            handleBefore(file) {
    
                const isType = (this.imgData.accept.indexOf(file.type) !== -1)
    
                // const isLt2M = file.size / 1024 / 1024 < 5;
    
                if (!isType) {
    
                    this.$message.error('图片格式不正确');
    
                }
    
                // if (!isLt2M) {
    
                //     this.$message.error('图片不能超过５M');
    
                // }
    
                // const isSize = new Promise(function(resolve, reject) {
    
                //     let _URL = window.URL || window.webkitURL;
    
                //     let img = new Image()
    
                //     img.onload = function() {
    
                //         let valid = (img.width == 756 && img.height == 1056)
    
                //         valid ? resolve() : reject();
    
                //     }
    
                //     img.src = _URL.createObjectURL(file)
    
                // }).then(() => {
    
                //     return file;
    
                // }, () => {
    
                //     this.$message.error('图片像素不正确');
    
                //     return Promise.reject();
    
                // });
    
                // isSize.then(response => {
    
                //     console.log(response)
    
                // })
    
                // if (isType) {
    
                //     document.getElementById("upload_control").childNodes[1].style.display = "none";
    
                // }
    
                return isType
    
            },
            getMagazineColumn(flag) {
    
                getAllColumns({flag:flag}).then((response) => {
    
                    if (response.code === 0) {
    
                        this.allColumns = response.data
    
                    }
    
                })
    
            },
    
            back() {
    
                this.$router.back(-1)
    
            }
    
        }
    
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .upload_span {
    
        margin-left: 10px;
    
        font-size: 16px;
    
        float: left;
    
        color: gray;
    
    }
    
    
    
    .online_set {
    
        margin: 10px;
    
    }
</style>
